<template>
	<!-- 1.view层 -->
	<div class="counter">			
		<button @click="btnMinus">-</button>
		<span style="padding: 5px;">{{n}}</span>
		<button @click="btnAdd">+</button>
	</div>
</template>

<script>
	export default {
		//data是一个函数，返回一个对象
		data() {
			return {
				n: 10,
			}
		},
		created(){
			this.n = 5;
			setInterval(()=>{
				this.n++;				
			},500);
		},
		methods: {
			btnAdd() {
				this.n++;
			},
			btnMinus() {
				this.n--;
			}
		},
		watch:{
			n(newValue){
				if(newValue > 10){
					this.$destroy();
				}				
			}
		}
	}
</script>

<style>
	.counter{
		margin: 10px;
	}
</style>
